<template>
  <div style="line-height:1.8" class="question">
     <div v-if="qType==1||qType==2||qType==3||qType==4||qType==5">
       <div v-if="qType == 1">
         <div class="q-title" ><span>{{question.itemOrder + 1}}、</span><span v-html="question.title"></span><span>。...{{"(" + question.score  + "分)"}}</span></div>
         <div class="q-content">
            <el-radio-group v-model="answer.content">
              <el-radio v-for="item in question.items" :key="item.prefix" :label="item.prefix">
                <span class="question-prefix">{{item.prefix}}、</span>
                <span v-html="item.content" class="q-item-span-content"></span>
              </el-radio>
            </el-radio-group>
         </div>
       </div>
       <div v-else-if="qType == 2">
         <div class="q-title" ><span>{{question.itemOrder + 1}}、</span><span v-html="question.title"></span><span>。...{{"(" + question.score  + "分)"}}</span></div>
         <div class="q-content">
            <el-checkbox-group v-model="answer.contentArray" >
              <el-checkbox v-for="item in question.items" :label="item.prefix" :key="item.prefix" >
                <span class="question-prefix">{{item.prefix}}、</span>
                <span v-html="item.content" class="q-item-span-content"></span>
              </el-checkbox>
            </el-checkbox-group>
         </div>
       </div>
       <div v-else-if="qType == 3">
         <div class="q-title" ><span>{{question.itemOrder + 1}}、</span><span v-html="question.title"></span><span>。...{{"(" + question.score  + "分)"}}</span></div>
         <span style="padding-right: 10px;">(</span>
         <el-radio-group v-model="answer.content">
            <el-radio  v-for="item in question.items"  :key="item.prefix"  :label="item.prefix">
              <span v-html="item.content" class="q-item-span-content"></span>
            </el-radio>
         </el-radio-group>
         <span style="padding-left: 10px;">)</span>
       </div>
       <div v-else-if="qType == 4">
         <div class="q-title" ><span>{{question.itemOrder + 1}}、</span><span v-html="question.title"></span><span>。...{{"(" + question.score  + "分)"}}</span></div>
         <!-- <div v-if="answer.contentArray!==null"> -->
          <el-form-item :label="item.prefix+'、'" :key="item.prefix"  v-for="item in question.items"  label-width="50px" style="margin-top: 10px;margin-bottom: 10px;">
            <el-input   v-model="answer.contentArray[item.prefix-1]" />
          </el-form-item>
        <!-- </div> -->
       </div>
       <div v-else-if="qType == 5">
         <div class="q-title" ><span>{{question.itemOrder + 1}}、</span><span v-html="question.title"></span><span>。...{{"(" + question.score  + "分)"}}</span></div>
         <div>
           <el-input v-model="answer.content"  type="textarea" rows="5" ></el-input>
         </div>
       </div>
     </div>
     <div v-else></div>
  </div>
</template>

<script>

export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: function () {
        return {}
      }
    },
    qType: {
      type: Number,
      default: 0
    },
    answer: {
      type: Object,
      default: function () {
        return { id: null, content: '', contentArray: [], doRight: false }
      }
    }
  },
  methods: {
    trueFalseFormatter (question) {
      return question.items.filter(d => d.prefix === question.correct)[0].content
    },
    //根据题目对错返回状态
    doRightTagFormatter(status){
      if( status == null){
        return 'warning';
      }else if( status ){
        return 'success';
      }else{
        return 'danger';
      }
    },
    //判断题目状态 是否已经修改
    doRightTextFormatter(status){
      if(status == null){
        return "待批改";
      }else if( status){
        return "正确";
      }else{
        return "错误";
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.question{
  font-family: "华文楷体";

}
.q-title{
  display: flex;
  align-items: center;
  
}
.q-content{

  /deep/.el-radio-group{
    display: flex;
    flex-direction: column;
  }
  /deep/.el-radio{
    display: flex;
    align-items: center;
  }
  /deep/.el-radio__label{
    display: flex;
    align-items: center;
  }
  /deep/.el-checkbox-group{
    display: flex;
    flex-direction: column;
  }
  /deep/.el-checkbox{
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }
  /deep/.el-checkbox__label{
    display: flex;
    align-items: center;
  }
 
}
.question-answer-show-item{
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  .question-show-item{
    font-weight: bold;
  }
  .tag{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>